<template>
    <div id="app">
        <div class="one_jilu">
            <div style="font-size: 0.37037rem;color:#818181;margin:0 0.231481rem;height: 1.203704rem;align-items: center;padding:0.092593rem 0;" class="flex-dire-row">
                注意：提现速度与银行打款状态不是完全同步的，请以 银行卡到账记录为准
            </div>
        </div>

        <div v-show="txRecordArr.length !== 0" class="txjl_zhuantai">
            <div v-for="(items,index) in txRecordArr" :key="index" style="align-items: center;justify-content: space-between;height: 3.148148rem;margin:0.185185rem auto;" class=" flex-dire-row one_jilu">
                <div style="width:100%;height: 100%;background-color: #fff;border-radius: 0.092593rem;justify-content: space-around;" class="flex-dire-column">
                    <p style="font-size: 0.388889rem;margin:0.37037rem 0.231481rem;">
                        <span>提现金额：</span>
                        <span style="color:#e7482e;">{{items.money}}元</span>
                    </p>
                    <div style="height: 1.111111rem;justify-content: space-around;border-bottom: 0.009259rem solid #ebebeb" class="flex-dire-column">
                        <div class="flex-dire-row" style="color:#818181;margin:0 0.231481rem;justify-content: space-between;">
                            <p style="font-size: 0.333333rem">提现时间</p>
                            <p style="font-size: 0.333333rem;">
                                <span style="margin-right: 0.231481rem;"> {{items.submit_time}}</span>
                            </p>
                        </div>
                    </div>

                    <div style="margin:0 0.231481rem;text-align: right;height: 1.018519rem;line-height: 1.018519rem;" v-show="items.state === 0">
                        <span class="item_one_style" style="color:#604a98;">待审核</span>
                    </div>

                    <div style="margin:0 0.231481rem;text-align: right;height: 1.018519rem;line-height: 1.018519rem;" v-show="items.state === 1">
                        <span class="item_one_style">待付款</span>
                    </div>

                    <div @click="showToastDetail" style="margin:0 0.231481rem;text-align: right;height: 1.018519rem;line-height: 1.018519rem;" v-show="items.state === 3">
                        <span style="display: inline-block;width: 0.416667rem;height: 0.416667rem;background-color: #de0808;border-radius: 100%;text-align: center;line-height: 0.416667rem;color: #fff;font-size: 0.37037rem;" id="nameNullShow">？</span>
                        <span class="item_one_style" style="color:#e7482e;">打款失败</span>
                    </div>

                    <div style="margin:0 0.231481rem;text-align: right;height: 1.018519rem;line-height: 1.018519rem;" v-show="items.state === 2">
                        <span class="item_one_style" style="color:#525252;">已到账</span>
                    </div>

                </div>
            </div>
        </div>
        <div v-show="txRecordArr.length === 0" style="text-align: center;margin:0.277778rem auto;font-size: 0.444444rem;">亲，您暂时还没有提现记录！</div>
    </div>    
</template>

<script>
import getRequests from '../assets/js/common';
import { MessageBox } from 'mint-ui';
export default {
  data () {
    return {
      name:'txRecord',
      txRecordArr:[]
    }
  },
  mounted () {
	this.https.post(getRequests.getRequests.getSubmitRecord,{
      }).then(res => {
          this.txRecordArr = res.data;
          console.log(res);
	})
  },
  watch:{
   
  },
  methods: {
      showToastDetail(){
        MessageBox({
            title: '打款失败原因',
            message: `<p>1.检查实名认证的身份和银行卡身份是否一致；</p>
    <p>2.检查选择的开户行和支行有没有填写错误；</p>
    <p>3.检查银行卡号码有没有输入错误</p>`,
            showCancelButton: true,
            showCancelButton:false,
            confirmButtonClass:''
        });
      }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   body {
            background-color: #f6f6f6;
        }
        
        #app {
            width: 10rem;
            margin: 0 auto;
        }
        
        .one_jilu {
            width: 9.361111rem;
            height: 1.388889rem;
            margin: 0 auto;
        }
        
        .fontSize_rz {
            font-size: 0.333333rem;
            color: #a8a8a8;
        }
        
        .fontSize_zuan {
            font-size: 0.333333rem;
            color: #525252;
        }
        
        .item_one_style {
            font-size: 0.37037rem;
            color: #e7482e;
            margin: 0 auto;
        }

        .mint-msgbox-message{
            color: #999;
            margin: 0;
            /* text-align: center; */
            line-height: 36px;
        }
        
</style>
